<template>
	<view class="detail">
		<!-- groupType === 1 默认小组模式 -->
		<template v-if="groupType === 1 || groupType === 2">
			<!-- 防止报错 -->
			<template v-if="groupDetail && globalJSON">
				<!-- 这些是通用信息，并不会走权限判断 | 开始 -->
				<!-- 小组头部信息 -->
				<view class="header-group-detail">
					<view class="_top-box">
						<view class="_cover">
							<image :src="groupDetail.cover" mode="widthFix"></image>
						</view>
						<view class="_right">
							<view class="_right-name">{{groupDetail.name}}</view>
							<view
								class="_right-description"
								v-if="groupDetail.description">{{groupDetail.description}}</view>
							<view
								class="_right-operate-button"
								v-if="groupDetail.interaction.likeEnabled||groupDetail.interaction.followEnabled">
								<template v-if="groupDetail.interaction.likeEnabled">
									<view
										:class="groupDetail.interaction.likeStatus?'_hover':''"
										@click="clickUserMarkButton('like')">
										<text class="iconfont icon-good"></text>
										<text class="_text">{{groupDetail.interaction.likeName}}</text>
										<text class="_text">{{groupDetail.likeCount}}</text>
									</view>
								</template>
								<template v-if="groupDetail.interaction.followEnabled">
									<view
										:class="groupDetail.interaction.followStatus?'_hover':''"
										@click="clickUserMarkButton('follow')">
										<text class="iconfont icon-favorite"></text>
										<text class="_text">{{groupDetail.interaction.followName}}</text>
										<text class="_text">{{groupDetail.followCount}}</text>
									</view>
								</template>
							</view>
						</view>
					</view>
					<view class="_banner" v-if="groupDetail.banner">
						<view><image :src="groupDetail.banner" mode="widthFix"></image></view>
					</view>
				</view>
				<!-- 是否有子小组 -->
				<view class="sub-group" v-if="subGroupList.length && groupType === 1">
					<view class="sub-group-box">
						<scroll-view scroll-x>
							<view
								:class="groupGid==subGroupGid||!subGroupGid?'_for _hover':'_for'"
								@click="clickSubGroupListButton({gid:groupGid})">
								<text>{{$t('contentAllList')}}</text>
							</view>
							<view
								:class="item.gid == subGroupGid?'_for _hover':'_for'"
								v-for="item in subGroupList"
								@click="clickSubGroupListButton(item)">
								<text>{{item.name}}</text>
								<text>({{item.postCount}})</text>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 帖子筛选 只有默认状态才会显示 -->
				<view class="post-query" v-if="groupType === 1">
					<view class="post-query-box">
						<view
							@click="clickPostQueryButton('createdTime')"
							:class="listPostQueryType==='createdTime'?'_hover':''">{{$t('contentNewList')}}</view>
						<view
							@click="clickPostQueryButton('comment')"
							:class="listPostQueryType==='comment'?'_hover':''">{{$t('comments')}}</view>
					</view>
				</view>
				<!-- 这些是通用信息，并不会走权限判断 | 结束 -->
				
				<!-- public (任何人都能查看小组内帖子)  -->
				<template v-if="groupDetail.privacy === 'public'">
					
					<!-- 帖子列表 -->
					<template v-if="groupType === 1">
						<list-default
							v-if="listDefaultStatus"
							ref="listDefault"
							:item="listPostQuery"></list-default>
					</template>
					<!-- groupType === 2 DIY模式 -->
					<template v-if="groupType === 2">
						<youransns-diy
							:youransnsConfig="youransnsDiyData"
							v-if="youransnsDiyStatus"></youransns-diy>
					</template>
				</template>
				<!-- private (只有成员才能查看小组内帖子) -->
				<template v-if="groupDetail.privacy === 'private'">
					<!-- 是否有权查看内容 -->
					<template v-if="groupDetail.canViewContent">
						<!-- 帖子列表 -->
						<template v-if="groupType === 1">
							<list-default
								v-if="listDefaultStatus"
								ref="listDefault"
								:item="listPostQuery"></list-default>
						</template>
						<!-- groupType === 2 DIY模式 -->
						<template v-if="groupType === 2">
							<youransns-diy
								:youransnsConfig="youransnsDiyData"
								v-if="youransnsDiyStatus"></youransns-diy>
						</template>
					</template>
					<!-- 无权查看内容，走关注流程 -->
					<template v-else>
						<!-- 已经关注 -->
						<template v-if="groupDetail.interaction.followStatus">
							<!-- 帖子列表 -->
							<template v-if="groupType === 1">
								<list-default
									v-if="listDefaultStatus"
									ref="listDefault"
									:item="listPostQuery"></list-default>
							</template>
							<!-- groupType === 2 DIY模式 -->
							<template v-if="groupType === 2">
								<youransns-diy
									:youransnsConfig="youransnsDiyData"
									v-if="youransnsDiyStatus"></youransns-diy>
							</template>
						</template>
						<!-- 未关注提示 + 操作 -->
						<template v-else>
							<!-- 关闭了关注 -->
							<template v-if="groupDetail.interaction.followMethod == 'api'">
								<mp-html
									:content="globalJSON.groupCanViewContent"
									:selectable="true"/>
							</template>
							<!-- 开启了关注 -->
							<template v-else>
								<view
									class="account-join-button"
									@click="clickUserMarkButton('follow')">
									{{$t('accountJoin')}}
								</view>
							</template>
						</template>
					</template>
				</template>
			</template>
			<!-- loading -->
			<template v-else>
				<view style="width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;">
					<global-loading></global-loading>
				</view>
			</template>
		</template>
		<!-- groupType === 3 聊天模式 -->
		<template v-else>
			<box-chat :groupGid="boxChatGid"></box-chat>
		</template>
		<template v-if="groupType === 1">
			<view
				class="box-side-button"
				@click="$_to(`editor/editor?type=post&editType=new&gid=${groupGid}&gname=${groupName}`)">
				<view class="box-side-button-ps">
					<text class="iconfont icon-edit-filling"></text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupGid:"",//页面传过来的gid
				subGroupGid:"",//点击子小组变化的gid
				groupType:1,// 1.默认小组模式 | 2.DIY模式 | 3.聊天模式
				groupDetail:null,//小组详情
				globalJSON:null,//配置文件
				subGroupList:[],//子小组列表
				listPostQuery:null,//获取帖子筛选参数
				listPostQueryType:"createdTime",//帖子类型参数
				listDefaultStatus:true,//列表组件状态
				youransnsDiyStatus:false,
				youransnsDiyData:null,
				boxChatGid:"",//即时聊天数据
				groupName:"",//小组名称
			}
		},
		onShow() {
			// 一些回调，查阅 DeveloperGuide.md
			if(
				uni.getStorageSync('editorPublishSuccess') ||
				uni.getStorageSync('extendWebView')
			)
			{
				this.groupType = 1;// 1.默认小组模式 | 2.DIY模式 | 3.聊天模式
				this.groupDetail = null;//小组详情
				this.globalJSON = null;//配置文件
				this.subGroupList = [];//子小组列表
				this.listPostQuery = null;//获取帖子筛选参数
				this.listPostQueryType = "createdTime";//帖子类型参数
				this.listDefaultStatus = true;//列表组件状态
				this.youransnsDiyStatus = false;
				this.youransnsDiyData = null;
				this.boxChatGid = "";
				this.getGlobalJSON();
				uni.removeStorageSync('editorPublishSuccess');
				uni.removeStorageSync('extendWebView');
			}
		},
		onLoad(e) {
			this.groupGid = e.gid; // 小组 gid
			this.getGlobalJSON(); // 获取配置
		},
		methods: {
			// 获取配置
			getGlobalJSON(){
				uni.request({
					url:this.$_configFile() + "global.json",
					method:"GET",
					success: (res) => {
						this.globalJSON = res.data;
						this.getGroupDiy();
					}
				})
			},
			// 请求小组 DIY 文件
			getGroupDiy(){
				uni.request({
					url:`${this.$_configFile()}group_${this.groupGid}.json`,
					method:"GET",
					success: (res) => {
						
						// groupType: 1.默认小组模式 | 2.DIY模式 | 3.聊天模式
						
						// 没有DIY，默认小组
						if(res.statusCode === 404){
							this.groupType = 1;
							this.getGroupDetail();
							return
						}
						// DIY小组
						if(res.statusCode === 200){
							this.groupType = res.data.groupType;
							uni.setNavigationBarTitle({title: res.data.barTitle});
							this.groupName = res.data.barTitle;
							// DIY 模式
							if(res.data.groupType === 2){
								this.getGroupDetail();
								this.youransnsDiyData = res.data;
								this.$nextTick(() => {
									this.youransnsDiyStatus = true;
								});
							}
							// 聊天模式
							if(res.data.groupType === 3){
								this.boxChatGid = this.groupGid;
							}
						}
					}
				})
			},
			// 获取组详情
			getGroupDetail(){
				this.$_request(
					"GET",`/api/fresns/v1/group/${this.groupGid}/detail`,
					{
						
					},
					(res) => {
						this.groupDetail = res.data.data.detail;
						this.groupName = res.data.data.detail.name;
						uni.setNavigationBarTitle({title: this.groupDetail.name});
						this.getGroupList();
						this.getGroupPost();
					}
				)
			},
			
			// 获取子小组
			getGroupList(){
				this.$_request(
					"GET", "/api/fresns/v1/group/list",
					{
						"gid":this.groupGid,
						"filterType":"whitelist",
						"filterKeys":"gid,name,postCount"
					},
					(res) => {
						if(res.data.data.list.length){
							this.subGroupList = res.data.data.list;
						}
					}
				)
			},
			// 获取帖子
			getGroupPost(){
				this.listPostQuery = {
                    "order": 0,
                    "css": "",
                    "page": true,
                    "query": {
                        "users": "",
                        "hashtags": "",
                        "geotags": "",
                        "groups": this.groupGid,
                        "includeSubgroups": 1,
                        "langTag": "",
                        "contentType": "",
                        "allDigest": "",
                        "digestState": "",
                        "stickyState": "",
                        "createdDays": "",
                        "createdDate": "",
                        "createdDateGt": "",
                        "createdDateLt": "",
                        "viewCountGt": "",
                        "viewCountLt": "",
                        "likeCountGt": "",
                        "likeCountLt": "",
                        "dislikeCountGt": "",
                        "dislikeCountLt": "",
                        "followCountGt": "",
                        "followCountLt": "",
                        "blockCountGt": "",
                        "blockCountLt": "",
                        "commentCountGt": "",
                        "commentCountLt": "",
                        "blockUsers": "",
                        "blockGroups": "",
                        "blockHashtags": "",
                        "blockGeotags": "",
                        "blockPosts": "",
                        "sincePid": "",
                        "beforePid": "",
                        "orderType": this.listPostQueryType,
                        "orderDirection": "",
                        "mapId": "",
                        "mapLng": "",
                        "mapLat": "",
                        "pageSize": 15
                    },
                    "randomInsertion___": "列表中随机插入",
                    "randomInsertion": {
                        "status": false,
                        "html": "<p>广告呀</p>"
                    }
                }
			},
			// 点击，切换子小组
			clickSubGroupListButton(item){
				this.listDefaultStatus = false;
				this.subGroupGid = item.gid;
				this.listPostQuery = {
					"order": 0,
					"css": "",
					"page": true,
					"query": {
						"users": "",
						"hashtags": "",
						"geotags": "",
						"groups": this.subGroupGid,
						"includeSubgroups": 1,
						"langTag": "",
						"contentType": "",
						"allDigest": "",
						"digestState": "",
						"stickyState": "",
						"createdDays": "",
						"createdDate": "",
						"createdDateGt": "",
						"createdDateLt": "",
						"viewCountGt": "",
						"viewCountLt": "",
						"likeCountGt": "",
						"likeCountLt": "",
						"dislikeCountGt": "",
						"dislikeCountLt": "",
						"followCountGt": "",
						"followCountLt": "",
						"blockCountGt": "",
						"blockCountLt": "",
						"commentCountGt": "",
						"commentCountLt": "",
						"blockUsers": "",
						"blockGroups": "",
						"blockHashtags": "",
						"blockGeotags": "",
						"blockPosts": "",
						"sincePid": "",
						"beforePid": "",
						"orderType": this.listPostQueryType,
						"orderDirection": "",
						"mapId": "",
						"mapLng": "",
						"mapLat": "",
						"pageSize": 15
					},
					"randomInsertion___": "列表中随机插入",
					"randomInsertion": {
						"status": false,
						"html": "<p>广告呀</p>"
					}
				}
				this.$nextTick(() => {
					this.listDefaultStatus = true;
				});
			},
			// 点击，帖子排序类型
			clickPostQueryButton(type){
				this.listDefaultStatus = false;
				this.listPostQueryType = type;
				this.listPostQuery = {
					"order": 0,
					"css": "",
					"page": true,
					"query": {
						"users": "",
						"hashtags": "",
						"geotags": "",
						"groups": this.subGroupGid?this.subGroupGid:this.groupGid,
						"includeSubgroups": 1,
						"langTag": "",
						"contentType": "",
						"allDigest": "",
						"digestState": "",
						"stickyState": "",
						"createdDays": "",
						"createdDate": "",
						"createdDateGt": "",
						"createdDateLt": "",
						"viewCountGt": "",
						"viewCountLt": "",
						"likeCountGt": "",
						"likeCountLt": "",
						"dislikeCountGt": "",
						"dislikeCountLt": "",
						"followCountGt": "",
						"followCountLt": "",
						"blockCountGt": "",
						"blockCountLt": "",
						"commentCountGt": "",
						"commentCountLt": "",
						"blockUsers": "",
						"blockGroups": "",
						"blockHashtags": "",
						"blockGeotags": "",
						"blockPosts": "",
						"sincePid": "",
						"beforePid": "",
						"orderType": this.listPostQueryType,
						"orderDirection": "",
						"mapId": "",
						"mapLng": "",
						"mapLat": "",
						"pageSize": 15
					},
					"randomInsertion___": "列表中随机插入",
					"randomInsertion": {
						"status": false,
						"html": "<p>广告呀</p>"
					}
				}
				this.$nextTick(() => {
					this.listDefaultStatus = true;
				});
			},
			// 点击，用户操作按钮，点赞、收藏
			clickUserMarkButton(type){
				uni.showLoading();
				this.$_request(
					"POST","/api/fresns/v1/user/mark",
					{
						"markType":type,
						"type":"group",
						"fsid":this.groupGid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code === 0){
							this.getGroupDetail();
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon:"none"
							});
						}
					}
				)
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.groupName,
				path: '/pages/group/detail?gid=' + this.groupGid
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.groupName,
				path: '/pages/group/detail?gid=' + this.groupGid
			}
		},
		// 上拉加载事件
		onReachBottom() {
			if(this.groupType === 1){
				this.$refs.listDefault.clickMoreButton();
			}
			if(this.groupType === 2){
				uni.$emit('onReachBottom')
			}
		},
	}
</script>

<style lang="scss">
.detail{
	.box-side-button{
		.box-side-button-ps{
			width: 90rpx;
			height: 90rpx;
			background: $theme;
			position: fixed;
			right: 25rpx;
			bottom: var(--window-bottom);
			z-index: 500;
			margin-bottom: 25rpx;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 40rpx;
			text{
				font-size: 40rpx;
				color: #FFF;
			}
		}
	}
	.account-join-button{
		display: flex;
		align-items: center;
		justify-content: center;
		background: $theme;
		margin: 0 25rpx;
		padding: 50rpx 0;
		color: #FFF;
		border-radius: 15rpx;
	}
	.header-group-detail{
		background: #FFF;
		._top-box{
			display: flex;
			padding: 25rpx;
			._cover{
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				border: 5rpx solid #FFF;
				box-shadow: 0 0 3rpx #000;
				flex-shrink: 0;
				overflow: hidden;
				margin-right: 20rpx;
			}
			._right{
				flex: 1;
				._right-name{
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
				}
				._right-description{
					font-size: 22rpx;
					line-height: 28rpx;
					margin-top: 15rpx;
				}
				._right-operate-button{
					display: flex;
					align-items: center;
					view{
						display: flex;
						align-items: center;
						justify-content: center;
						line-height: 22rpx;
						border: 1px solid $border;
						margin: 15rpx 15rpx 0 0;
						padding: 6rpx 10rpx 5rpx 10rpx;
						border-radius: 100rpx;
						text{
							font-size: 22rpx;
							color: $placeholder;
						}
						.iconfont{
							font-size: 28rpx;
							padding-right: 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							line-height: 28rpx;
						}
					}
					._hover{
						background: $theme;
						border: 1px solid $theme;
						text{
							color: #FFF;
						}
					}
				}
			}
		}
		._banner{
			padding: 0 25rpx 25rpx 25rpx;
			view{
				width: 100%;
				overflow: hidden;
				border-radius: 10rpx;
			}
		}
	}
	.sub-group{
		background: #FFF;
		.sub-group-box{
			border: 1px solid $border;
			border-left: 0;
			border-right: 0;
			display: flex;
			align-items: center;
			scroll-view{
				white-space: nowrap;
				height: 80rpx;
				._for{
					height: 80rpx;
					display: inline-flex;
					align-items: center;
					padding: 0 0 0 25rpx;
					line-height: 28rpx;
					text{
						font-size: 28rpx;
						border-bottom: 1px solid #FFF;
					}
					text:nth-child(2){
						color: $placeholder;
						font-size:18rpx;
						padding-left: 5rpx;
					}
				}
				._hover{
					text{
						border-bottom: 1px solid $theme;
						color: $theme;
					}
					text:nth-child(2){
						color: $theme;
						font-size:18rpx;
						padding-left: 5rpx;
					}
				}
			}
		}
	}
	.post-query{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 25rpx;
		.post-query-box{
			display: flex;
			align-items: center;
			border: 1px solid $border;
			background: #FFF;
			border-radius: 100rpx;
			overflow: hidden;
			view{
				font-size: 22rpx;
				line-height: 22rpx;
				padding: 10rpx 15rpx;
			}
			._hover{
				background: $theme;
				color: #FFF;
			}
		}
	}
}
</style>
